<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0">
    <!-- 引入初始化 css 文件 -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入自己的首页的 css -->
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

<body>

    <div class="searchBar">
        <div class="content">
            <div class="search">
                <i></i>
                <span>搜索:目的地/酒店/景点/航班号</span>
            </div>
            <div class="sign"><span></span></div>
        </div>
    </div>

    <div class="banner">
        <a href="#"> <img src="images/banner.jpg"></a>
    </div>
    <div class="mainNav">
        <a href="#"><i></i><span> 攻略·景点</span></a>
        <a href="#"><i></i><span> 门票·娱乐</span></a>
        <a href="#"><i></i><span> 美食林</span></a>
        <a href="#"><i></i><span> 一日游</span></a>
        <a href="#"><i></i><span> 周边游</span></a>
    </div>

    <div class="classification">
        <div class="line1">
            <a href="#"><span>酒店</span>
            </a>
            <a href="#"><span>民宿·客栈</span>
            </a>
            <a href="#"><span>特价·爆款</span>
            </a>
        </div>


        <div class="line2">
            <a href="#"><span>机票</span>
            </a>
            <a href="#"><span>火车票</span>
            </a>
            <a href="#"><span>汽车·船票</span>
            </a>
            <a href="#"><span>专车·租车</span>
            </a>
        </div>

        <div class="line3">
            <a href="#"><span>旅游</span>
            </a>
            <a href="#"><span>高铁游</span>
            </a>
            <a href="#"><span>邮轮游</span>
            </a>
            <a href="#"><span>定制游</span>
            </a>
        </div>




    </div>
    <div class="nav">
        <a href="#"><i></i>自由行</a>
        <a href="#"><i></i>自由行</a>
        <a href="#"><i></i>自由行</a>
        <a href="#"><i></i>自由行</a>
        <a href="#"><i></i>自由行</a>
        <a href="#"><i></i>自由行</a>
        <a href="#"><i></i>自由行</a>
        <a href="#"><i></i>自由行</a>
        <a href="#"><i></i>自由行</a>
        <a href="#"><i></i>自由行</a>
    </div>


    <div class="discount">
        <div class="disTitle">
            <h1>
                <!-- 这里要的就是一个容器 I使用定位技术 然后flex between -->
                <i></i>
            </h1>
            <a href="#" class="more">获取更多福利</a>
        </div>
        <div class="disBody">
            <a href="#">
                <img src="images/activity_01.png" alt="">
                <span>广告</span>
            </a>
            <a href="#">
                <img src="images/activity_02.jpg" alt="">
                <span>广告</span>
            </a>
        </div>
    </div>

</body>

</html>